<template>
	<view class="search-station" @tap="toSearchStation">
		<view class="location-icon"><u-icon name="map" size="20" color="inherit"></u-icon></view>
		<view class="city">北京市</view>
		<view class="virtually-input">输入目的地/电站名</view>
	</view>
</template>

<script lang="ts" setup>
	import UIcon from 'uview-ui/components/u-icon/u-icon.vue'
	
	function toSearchStation() {
		uni.navigateTo({
			url: '/pages/searchStation/searchStation'
		})
	}
	defineExpose({
		toSearchStation
	})
</script>

<style lang="scss" scoped>
.search-station {
	display: flex;
	align-items: center;
	width: 100%;
}
.location-icon {
	flex: none;
	transform: translateY(0.5px);
	color: $u-tips-color;
}
.city {
	flex: none;
	font-size: 12px;
}
.virtually-input {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: $u-tips-color;
	padding: 0 10px;
	flex: 1;
	height: 30px;
	background-color: $u-bg-color;
	border-radius: 4px;
	margin-left: 4px;
	box-sizing: border-box;
}
</style>